<div class='highlights-container'>
    <h4>Your Interests</h4>
    <div ng-repeat="interest in user.explicitInterests track by $index" class="interests-container">
        <div class="thumbnail interest-thumbnail" ng-click="explore(interest)" >
            <img ng-src="{{interest.thumbnail}}" alt="img" class="thumbnail-img"/>
        </div>
        <div>
            <div class="interest-title">{{getShowName(interest.name, 15)}}</div>
        </div>
        <br ng-show="($index+1)%8==0" />
    </div>
    <div ng-show="user.explicitInterests.length == 0">
        You haven't expressed any interests yet.
    </div>
</div>

<hr class='content-separator' />

<div class="highlights-container">
    <h4>
        Suggested Interests
        <button type="button" class="btn btn-default refresh" ng-click="refreshInterests()">
            <span class="glyphicon glyphicon-refresh"></span>
        </button>
    </h4>
    <div ng-repeat="interest in all_interests track by $index" class="interests-container">
        <div class="thumbnail interest-thumbnail" ng-click="explore(interest[0])">
            <img ng-src="{{interest[0].thumbnail}}" alt="img" class="thumbnail-img"/>
        </div>
        <div>
            <div>
                <progressbar class="progress-striped" value="interest[1]" type="{{getType(interest[1])}}">
                    {{interest[1]}}%
                </progressbar>
            </div>
            <div class="interest-title">{{getShowName(interest[0].name, 15)}}</div>
        </div>
        <br ng-show="($index+1)%8==0" />
    </div>
    <div ng-show="all_interests.length === 0">
        There are no suggestions. Try changing the suggestion preferences.
    </div>
</div>